<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "comment2",
});
</script>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { Router } from "@/utils/router";

import love1 from "@/package/famous-talk/static/love1.png";
import love2 from "@/package/famous-talk/static/love2.png";

type dataType = {
  id: string;
  name: string;
};
const porps = defineProps<{ data: dataType }>();
const isLove = ref(true);

const loveClick = () => {
  isLove.value = !isLove.value;
};

const toDetail = () => {
  Router.navigateTo(`/package/famous-talk/pages/detail/index?id=${5}`);
};
</script>

<template>
  <view class="commentWrap2">
    <view class="leftWrap">
      <image
        src="https://ti.sanmaoyou.com/img/new_images/2024-04/e7e4deb8822f128fc69c03ecdf953db3.jpg"
        mode="scaleToFill"
      />
    </view>
    <view class="rightbox">
      <view class="midle">
        <view class="line1">
          <view class="name"> 虹猫蓝兔 </view>
        </view>
        <view class="line2">
         早茶是广州人的主要饮食习惯
        </view>
        <view class="line3">
          <view class="date">9-21</view>
          <view class="reply">回复</view>
        </view>
      </view>
      <view class="rightWrap">
        <view class="love">
          <image
            :src="isLove ? love1 : love2"
            mode="scaleToFill"
            @click="loveClick"
          />
          <view class="loveWord"> 1.4W </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.commentWrap2 {
  margin-top: 10rpx;
  display: flex;
  width: 100%;
  .leftWrap {
    width: 36rpx;
    height: 36rpx;
    border-radius: 34rpx;
    overflow: hidden;
    flex-shrink: 0;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .rightbox {
    flex-grow: 1;
    display: flex;
    .midle {
      margin-left: 20rpx;
      flex-grow: 1;
      .line1 {
        display: flex;
        justify-content: space-between;
        .name {
          font-size: 28rpx;
          color: #b2b2b2;
          line-height: 40rpx;
        }
      }
      .line2 {
        margin-top: 10rpx;
        font-size: 28rpx;
        color: #333333;
        line-height: 40rpx;
      }
      .line3 {
        margin-top: 10rpx;
        display: flex;
        .date {
          margin-right: 20rpx;
          font-size: 24rpx;
          color: #b2b2b2;
          line-height: 34rpx;
        }
        .reply {
          font-size: 24rpx;

          color: #666666;
          line-height: 34rpx;
        }
      }
    }
    .rightWrap {
      .love {
        width: 36rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        image {
          width: 36rpx;
          height: 36rpx;
        }
        .loveWord {
          opacity: 0.66;
          font-size: 18rpx;
          color: #666666;
          line-height: 26rpx;
        }
      }
    }
  }
}
</style>
